<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="/aceAdminLayout/FunctionSetting :: header">
    <title>菜单管理</title>

</head>
<body class="no-skin" style="margin:0;padding:0;overflow:hidden;background-color: white" scroll="no">

        <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12" style="box-shadow: 0px 0px 10px 5px #fcfcfc;border-radius:20px; padding: 10px 10px 10px 10px;border:1px solid #5f5656">
                <div class="col-xs-3">
                     <input type="text" id="SelectMenuName" placeholder="菜单名称:">
                </div>
                <div class="col-xs-3">
                     <input type="text" id="SelectMenuPerms" placeholder="菜单权限字符串">
                </div>
                <div class="col-xs-3">
                    <button class="btn btn-white btn-info" onclick="selectMenuTop()">
                        <i class="fa fa-search">
                        </i>
                        &nbsp;搜索
                    </button>
                    <button class="btn btn-white btn-info" onclick="cleanMenuInput()">
                        <i class="fa fa-refresh">
                        </i>
                        &nbsp;重置
                    </button>
                    <button class="btn btn-white btn-info" onclick="RefreshMenu()">
                        <i class="ace-icon fa fa-undo">
                        </i>
                        刷新
                    </button>
                </div>
            </div>
        </div>
        </div>
        </br>
        </br>
        </br>
        </br>
        <div class="col-xs-12">
            <div class="row">
                <table id="tableMenuTree" style="table-layout: fixed;"></table><!--必须设置table-layout: fixed;才能生效-->
            </div>
            <div class="row">
                <!--模态框修改弹窗-->
                <div class="modal fade" id="menusexampleModal" tabindex="-1" role="dialog" aria-labelledby="menusModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="menusModal">修改菜单</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">

                                    <div class="col-xs-4">
                                        <label for="menuId" class="col-form-label">菜单ID:</label>
                                        <input type="text" class="form-control" id="menuId" name="menuId" disabled="disabled"></input>
                                    </div>

                                    <div class="col-xs-4 col-md-offset-1">
                                        <label for="menuName" class="col-form-label">菜单名称:</label>
                                        <input class="form-control" id="menuName" name="menuName"></input>
                                    </div>

                                </div>
                                <div class="row">

                                    <div class="col-xs-4">
                                        <label for="parentId" class="col-form-label">父菜单ID:</label>
                                        <input class="form-control" name="parentId" id="parentId" disabled="disabled"></input>
                                    </div>

                                    <div class="col-xs-4 col-md-offset-1">
                                        <label for="orderNum" class="col-form-label">显示顺序:</label>
                                        <input class="form-control" id="orderNum" name="orderNum" ></input>
                                    </div>

                                </div>
                                <div class="row">

                                    <div class="col-xs-4">
                                        <label for="url" class="col-form-label">请求地址:</label>
                                        <textarea class="form-control" id="url" name="url" ></textarea>
                                    </div>
                                    <div class="col-xs-4 col-md-offset-1">
                                        <label for="remark" class="col-form-label">备注:</label>
                                        <textarea class="form-control" id="remark" name="remark"></textarea>
                                    </div>
                                </div>


                                <div class="row">

                                    <div class="col-xs-4">
                                        <label for="perms" class="col-form-label">权限标识:</label>
                                        <input class="form-control" id="perms" name="perms"></input>
                                    </div>

                                    <div class="col-xs-4 col-md-offset-1">
                                        <label for="icon" class="col-form-label">菜单图标:</label>
                                        <input class="form-control" id="icon" name="icon" placeholder="字符串"></input>
                                    </div>

                                </div>
                                <div class="row">

                                    <div class="col-xs-4">
                                        <label for="createBy" class="col-form-label">创建者:</label>
                                        <input class="form-control" id="createBy" name="createBy"></input>
                                    </div>

                                    <div class="col-xs-4 col-md-offset-1">
                                        <label for="updateBy" class="col-form-label">更新者:</label>
                                        <input class="form-control" id="updateBy" name="updateBy"></input>
                                    </div>

                                </div>


                                </tr>

                                <div class="row">
                                    <div class="col-xs-12">
                                        <label class="col-form-label">菜单类型:</label>
                                        <!--                                        <input class="form-control" id="menuType" name="menuType" placeholder="菜单类型（M目录 C菜单 F按钮）"></input>-->
                                        <label class="radio-inline">
                                            <input type="radio" value="M" name="menuType">目录
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="C" name="menuType">菜单
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="F" name="menuType">按钮
                                        </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <label class="col-form-label">菜单状态:</label>
                                        <!--                                        <input class="form-control" id="visible" name="visible" placeholder="菜单状态（0显示 1隐藏）"></input>-->
                                        <label class="radio-inline">
                                            <input type="radio" value="menuItem" name="UpdateTarget">页签
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="menuBlank" name="UpdateTarget">新窗口
                                        </label>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xs-12">
                                        <label class="col-form-label">菜单状态:</label>
                                        <!--                                        <input class="form-control" id="visible" name="visible" placeholder="菜单状态（0显示 1隐藏）"></input>-->
                                        <label class="radio-inline">
                                            <input type="radio" value="0" name="visible">显示
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" value="1" name="visible">隐藏
                                        </label>
                                    </div>
                                </div>

                                </form>
                                <div class="modal-footer">

                                    <button type="button" class="btn btn-white btn-info" data-dismiss="modal" onclick="backIndex()"><i class="ace-icon fa fa-reply icon-only"></i>返回</button>
                                    <button type="button" id="GoUpdate"  class="btn btn-white btn-info" value="submit"><i class="ace-icon fa fa-check">
                                    </i>提交</button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--模态框修改弹窗结束-->


                <!--模态框add的弹窗-->
                <div class="modal fade" id="addmenusexampleModal" tabindex="-1" role="dialog" aria-labelledby="addmenusModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="addmenusModal">为角色增加菜单</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="row">

                                        <div class="col-xs-4">
                                        <label for="addroleId" class="col-form-label">角色ID:</label>
                                        <input type="text" class="form-control" id="addroleId" name="addroleId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></input>
                                        </div>

                                        <div class="col-xs-4 col-md-offset-1">
                                        <label for="menuId" class="col-form-label">菜单ID:</label>
                                        <input type="text" class="form-control" id="addmenuId" name="addmenuId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></input>
                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-xs-4">
                                        <label for="menuName" class="col-form-label">菜单名称:</label>
                                        <input class="form-control" id="addmenuName" name="addmenuName"></input>
                                        </div>

                                        <div class="col-xs-4 col-md-offset-1">
                                        <label for="parentId" class="col-form-label">父菜单ID:</label>
                                        <input class="form-control" name="addparentId" id="addparentId" onkeyup="value=value.replace(/[^\d|^\n\r]/g,'');"></input>
                                        </div>

                                    </div>
                                    <div class="row">

                                        <div class="col-xs-4">
                                        <label for="orderNum" class="col-form-label">显示顺序:</label>
                                        <input class="form-control" id="addorderNum" name="addorderNum"></input>
                                        </div>

                                        <div class="col-xs-4 col-md-offset-1">
                                        <label for="url" class="col-form-label">请求地址:</label>
                                        <input class="form-control" id="addurl" name="addurl"></input>
                                        </div>

                                    </div>



                                    <div class="row">

                                        <div class="col-xs-4">
                                        <label for="icon" class="col-form-label">菜单图标:</label>
                                        <input class="form-control" id="addicon" name="addicon" placeholder="字符串"></input>
                                        </div>

                                        <div class="col-xs-4 col-md-offset-1">
                                        <label for="createBy" class="col-form-label">创建者:</label>
                                        <input class="form-control" id="addcreateBy" name="addcreateBy"></input>
                                        </div>

                                    </div>

                                    <div class="row">

                                        <div class="col-xs-4">
                                        <label for="updateBy" class="col-form-label">更新者:</label>
                                        <input class="form-control" id="addupdateBy" name="addupdateBy"></input>
                                        </div>

                                        <div class="col-xs-4 col-md-offset-1">
                                        <label for="remark" class="col-form-label">备注:</label>
                                        <input class="form-control" id="addremark" name="addremark"></input>
                                        </div>

                                    </div>
                                    <div class="row">

                                        <div class="col-xs-12">
                                            <label for="perms" class="col-form-label">权限标识:</label>
                                            <input class="form-control" id="addperms" name="addperms"></input>
                                        </div>

                                    </div>
                                </br>


                                    <div class="row">

                                        <div class="col-xs-12">

                                            <!--                                        <input class="form-control" id="addtarget" name="addtarget" placeholder="打开方式（menuItem页签 menuBlank新窗口）"></input>-->
                                            <label>打开方式:</label>
                                            <label class="radio-inline">
                                                <input type="radio" value="menuItem" name="addtarget">页签
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="menuBlank" name="addtarget">新窗口
                                            </label>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-xs-12">
                                            <label class="col-form-label">菜单类型:</label>
                                            <!--                                        <input class="form-control" id="addmenuType" name="addmenuType" placeholder="菜单类型（M目录 C菜单 F按钮）"></input>-->

                                            <label class="radio-inline">
                                                <input type="radio" value="M" name="addmenuType">目录
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="C" name="addmenuType">菜单
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="F" name="addmenuType">按钮
                                            </label>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-xs-12">
                                            <label class="col-form-label">菜单状态:</label>
                                            <!--                                        <input class="form-control" id="addvisible" name="addvisible" placeholder="菜单状态（0显示 1隐藏）"></input>-->
                                            <label class="radio-inline">
                                                <input type="radio" value="0" name="addvisible">显示
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" value="1" name="addvisible">隐藏
                                            </label>
                                        </div>
                                    </div>

                                </form>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white btn-info" data-dismiss="modal" onclick="backIndex()"><i class="ace-icon fa fa-reply icon-only"></i>返回</button>
                                    <button type="button" id="GoToAddMenu" class="btn btn-white btn-info" value="submit"><i class="ace-icon fa fa-check">
                                    </i>提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--模态框add的弹窗结束-->

            </div>
        </div>


<div th:include="/aceAdminLayout/FunctionSetting.html :: footerJs"></div><!--页脚Js-->
<!--<script th:src="@{../../static/js/YuTreeGrid.js}"></script>-->
<!--TableTree的操作-->
<script>
    /**
     *
     * @type 初始化Table
     */
    var $table=$('#tableMenuTree');
    $(document).ready(function () {
        createSelectMenu();
        let SysMenu=new createSelectMenu();
        creatMenuTableTree(SysMenu);
    })
    /*创造向后端请求的参数*/
    function createSelectMenu(){
        this.menuName=$("#SelectMenuName").val();
        this.perms=$("#SelectMenuPerms").val();
    }

    function creatMenuTableTree(Menu) {
        $('#tableMenuTree').bootstrapTable('destroy');
        $.ajax({
            // url: '/system/sysmenu/bootStrapTableTreeNewUserShow',
            url: '/system/sysmenu/bootStrapTableTree',
            type: "post",
            contentType: "application/json;charsetset=UTF-8",//必须
            dataType: "json",//必须
            data:JSON.stringify(Menu),
            success: function (data) {
                createMenuTreeTableHtml(data);
                getMenuButton();
            }
        })
    }


    /*创建bootStrap table网页中的html代码*/
    function createMenuTreeTableHtml(dataTreeTable) {
        $table.bootstrapTable({
            data: dataTreeTable,
            idField: 'menuId',
            dataType: 'jsonp',
            columns: [{
                field: 'menuId',
                title: 'ID',
                visible: false
            }, {
                title: '菜单名称',
                field: 'menuName',
                width: '7%',
                formatter: function (value, row, index) {
                    if (row.icon === "" || row.icon === undefined) {
                        return row.menuName;
                    } else {
                        return '<span class="nav-label"><i class="' + row.icon + '"></i> ' + row.menuName + '</span>';
                    }
                }
            }, {
                field: 'orderNum',
                title: '显示顺序',
                visible: false
            }, {
                field: 'parentId',
                title: '父级菜单',
                visible: false
            }, {
                field: 'url',
                width: '15%',
                title: '请求地址',
                align: "center",
            }, {
                title: '类型',
                field: 'menuType',
                width: '10%',
                align: "center",
                formatter: function (value, item, index) {
                    if (item.menuType == 'M') {
                        return '<span class="label label-success">目录</span>';
                    } else if (item.menuType == 'C') {
                        return '<span class="label label-primary">菜单</span>';
                    } else if (item.menuType == 'F') {
                        return '<span class="label label-warning">按钮</span>';
                    }
                }
            }, {
                field: 'visible',
                title: '可见',
                width: '10%',
                align: "center",
                formatter: function (value, row, index) {
                    if (row.visible === '0')
                        return '<span class="label label-success arrowed">显示</span>';
                    else
                        return '';
                }
            }, {
                field: 'perms',
                title: '权限标识',
                width: '8%',
                align: "center"
            }, {
                width: '20%',
                title: '操作',
                align: "center",
                    formatter: function(value, row, index) {
                        return "                                                <div class=\"menu-group-add\" style=\"display: inline-block;visibility: hidden;\">\n" +
                            "                                                    <button class=\"btn btn-white btn-info\" data-toggle=\"modal\" data-target=\"#addmenusexampleModal\" data-whatever=\"@fat\">\n" +
                            "                                                      <i class='glyphicon glyphicon-transfer'></i>  添加菜单 \n" +
                            "                                                    </button>\n" +
                            "                                                </div>\n" +
                            "\n" +
                            "                                                <div class=\"menu-group-update\" style=\"display: inline-block;visibility: hidden;\">\n" +
                            "                                                    <button class=\"btn btn-white btn-info\" data-toggle=\"modal\" data-target=\"#menusexampleModal\" data-whatever=\""+row.menuId+"\">\n" +
                            "                                                      <i class=\"glyphicon glyphicon-pencil\"></i>    修改菜单\n" +
                            "                                                    </button>\n" +
                            "                                                </div>\n"+
                            "     <div class=\"menu-group-remove\" style=\"display: inline-block;visibility: hidden;\">\n" +
                            "                                                    <a th:href=\"@{'/system/sysmenu/removeByd/'+"+row.menuId+"}\">\n" +
                            "                                                        <button class=\"btn btn-white btn-info\">\n" +
                            "                                                            <i class=\"ace-icon fa fa-trash-o bigger-120\">删除菜单</i>\n" +
                            "                                                        </button>\n" +
                            "                                                    </a>\n" +
                            "                                                </div>\n";
                    }
            },],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'menuName',
            //指定父id列
            parentIdField: 'parentId',

            onResetView: function (data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 0,
                    expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        //调整页眉和页脚的大小以适合当前列的宽度   $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');

            },
            onCheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas, row, "id", "pid", true);

                // 勾选父类
                selectParentChecked(datas, row, "id", "pid")

                // 刷新数据
                $table.bootstrapTable('load', datas);
            },

            onUncheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                selectChilds(datas, row, "id", "pid", false);
                $table.bootstrapTable('load', datas);
            },
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    }


    /*条件查询Top*/
    function selectMenuTop() {
        createSelectMenu();
        let SysMenu=new createSelectMenu();
        creatMenuTableTree(SysMenu);
    }

    /*清空输入框*/
    function cleanMenuInput() {
       $("#SelectMenuName").val('');
        $("#SelectMenuPerms").val('');
    }


    /*获取treetable Crud操作按钮*/
    function getMenuButton() {
        $.ajax({
            url: '/system/sysuser/getMenu',
            type: "post",
            contentType: "application/json;charsetset=UTF-8",//必须
            dataType: "json",//必须
            success: function (data) {
                for (var i = 0; i < data.length; i++) {

                    if (data[i].url === "/system/sysmenu/removeByd")
                        $(".menu-group-remove").css('visibility', 'visible');

                    if (data[i].url === "/system/sysmenu/addmenu")
                        $(".menu-group-add").css('visibility', 'visible');

                    if (data[i].url === "/system/sysmenu/updataMenu")
                        $(".menu-group-update").css('visibility', 'visible');
                }
            }
        });
    }

    /*刷新当前页面*/
    function RefreshMenu(){
        createSelectMenu();
        let SysMenu=new createSelectMenu();
        creatMenuTableTree(SysMenu);
    }


    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas,row,id,pid,checked) {
        for(var i in datas){
            if(datas[i][pid] == row[id]){
                datas[i].check=checked;
                selectChilds(datas,datas[i],id,pid,checked);
            };
        }
    }

    function selectParentChecked(datas,row,id,pid){
        for(var i in datas){
            if(datas[i][id] == row[pid]){
                datas[i].check=true;
                selectParentChecked(datas,datas[i],id,pid);
            };
        }
    }

    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if(selRows.length == 0){
            alert("请至少选择一行");
            return;
        }

        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为："+postData);

    }

    function add(id) {
        alert("add 方法 , id = " + id);
    }
    function del(id) {
        alert("del 方法 , id = " + id);
    }
    function update(id) {
        alert("update 方法 , id = " + id);
    }

</script>

<!--模态框操作-->
<script>
        /*返回跳转*/
        function backIndex(){
            window.location.href="/newUserShow"
        }

         /*修改值时，页面弹框获取后端的值*/
        $('#menusexampleModal').on('show.bs.modal', function (event){
            var button = $(event.relatedTarget);
            var id = button.data('whatever');
            var modal = $(this);
            $.ajax({
                url: "/system/sysmenu/getOneMenu/"+id,
                type: "get",
                dataType: "json",
                success: function (date){
                    console.log(date)
                    modal.find(' #menuId' ).val(date.menuId);
                    modal.find(' #menuName' ).val(date.menuName);
                    modal.find(' #parentId' ).val(date.parentId);
                    modal.find(' #orderNum' ).val(date.orderNum);
                    modal.find(' #url' ).val(date.url);
                    // modal.find(' #target' ).val(date.target);
                    $("input[name=\"UpdateTarget\"][value="+date.target+"]").attr("checked","checked");

                    // modal.find(' #menuType' ).val(date.menuType);
                    $("input[name=\"menuType\"][value="+date.menuType+"]").attr("checked","checked");
                    // modal.find(' #visible' ).val(date.visible);
                    $("input[name=\"visible\"][value="+date.visible+"]").attr("checked","checked");

                    modal.find(' #perms' ).val(date.perms);
                    modal.find(' #icon' ).val(date.icon);
                    modal.find(' #createBy' ).val(date.createBy);
                    modal.find(' #updateBy' ).val(date.updateBy);
                    modal.find(' #remark' ).val(date.remark);

                }
            })
        })

        /*弹窗修改值 按钮提交*/
        $('#GoUpdate').click(function() {
            function Menu(){
                this.menuId = $('#menuId').val();
                this.menuName = $('#menuName').val();
                this.parentId= $('#parentId').val();
                this.orderNum = $('#orderNum').val();
                this.url = $('#url').val();
                // this.target = $('#target').val();
                this.target = $('input[name="UpdateTarget"]:checked').val().toString();
                // this.menuType = $('#menuType').val();
                this.target = $('input[name="menuType"]:checked').val().toString();
                // this.visible = $('#visible').val();
                this.target = $('input[name="visible"]:checked').val().toString();
                this.perms = $('#perms').val();
                this.icon = $('#icon').val();
                this.createBy = $('#createBy').val();
                this.updateBy = $('#updateBy').val();
                this.remark = $('#remark').val();
            }

            var menu = new Menu();
            console.log(JSON.stringify(menu));
            $.ajax({
                type : "post",
                url: "/system/sysmenu/updataMenu",
                data: JSON.stringify(menu),//必须
                contentType : "application/json;charsetset=UTF-8",//必须
                dataType:"json",//必须
            });
            $("#menusexampleModal").modal("hide");
        })

        /*打开增加菜单按钮*/
        $('#menusexampleModal').on('show.bs.modal', function (event){
            var button = $(event.relatedTarget);
            var modal = $(this);
        })


        /*增加菜单提交按钮*/
        $('#GoToAddMenu').click(function() {
            function addMenu() {
                this.roleId = $('#addroleId').val();
                this.menuId = $('#addmenuId').val();
                this.menuName = $('#addmenuName').val();
                this.parentId = $('#addparentId').val();
                this.orderNum = $('#addorderNum').val();
                this.url = $('#addurl').val();
                // this.target = $('#addtarget').val();
                this.target = $('input[name="addtarget"]:checked').val().toString();
                // this.menuType = $('#addmenuType').val();
                this.target =$('input[name="addmenuType"]:checked').val().toString();
                // this.visible = $('#addvisible').val();
                this.target =$('input[name="addvisible"]:checked').val().toString();
                this.perms = $('#addperms').val();
                this.icon = $('#addicon').val();
                this.createBy = $('#addcreateBy').val();
                this.updateBy = $('#addupdateBy').val();
                this.remark = $('#addremark').val();
            }
            var addmenu= new addMenu();
            console.log(JSON.stringify(addmenu));
            $.ajax({
                type : "post",
                url: "/system/sysmenu/addmenu",
                data: JSON.stringify(addmenu),//必须
                contentType : "application/json;charsetset=UTF-8",//必须
                dataType:"json",//必须
            });
            $("#addmenusexampleModal").modal("hide");
        })
    </script>
</body>
</html>